<template>
  <div>
     <h1>我是子组件</h1>
     <h1>{{food}}</h1>
     <h1>{{props.price}}</h1>
     <h1 v-for="item in list">{{item}}</h1>
     <button @click="toSend">给父组件传值</button>
  </div>
</template>
<script setup>
  import {defineProps,ref,defineEmits} from 'vue'
  // vue3的父传子 用 defineProps方法 定义属性
  // 父组件 用v-bind传值  :属性="值"
  // 子组件渲染直接用props属性名  food price list
  // js中使用需要props.food

  let props=defineProps({
    food:{
      type:String,
      default:'苹果'
    },
    price:{
      type:Number,
      default:10
    },
    list:{
      type:Array,
      default:()=>[]
    }
  })
  // js中使用props
    console.log(props.food)
   console.log(props.list)

  //  子组件向父组件传值  
  //  父组件自定义事件 
  // 子组件通过 defineEmits 方法声明事件 并触发传值
  // 事件函数的形参 就是子组件传来的数据
  let emit=defineEmits(['sendMsg',"sendList"])
   let zdata=ref("我是子组件的数据") //子组件数据
  let list=ref(["苹果","香蕉","西瓜"])
   let toSend=()=>{
      // 触发自定义事件并传值
      console.log("1111")
       emit("sendMsg",zdata.value)

      //  触发自定义事件并传值
      emit("sendList",list.value)
   }
   

</script>